<template>
    <div style="padding-top: 59px;">
        <img src="../../assets/images/consultantIndexbanner.jpg" width="100%" class="displayB" alt="">
        <div class="award-form">
            <el-form ref="form" :rules="formrules" :model="form" class="award-ruleForm">
                <el-form-item label="选择需求类型：" style="padding-top: 20px;">
                    <el-button size="small " v-for="(item,index) in typeOpt" :key="index" @click="typechange(index,item.st_id)" class="type_btn" :class="activeind == index ? 'changes': ''"><i>{{item.st_name}}</i></el-button>
                </el-form-item>
                <el-form-item prop="dc_content">
                    <el-input type="textarea" :rows="2" placeholder="请简要描述您的需求" v-model="form.dc_content"></el-input>
                </el-form-item>
                
                <el-row :gutter="60">
                    <el-col :span="12">
                        <el-form-item prop="dc_phone" label="手机号码：">
                            <el-input placeholder="请输入手机号码" v-model="form.dc_phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item prop="verify" style="margin-top: 36px;">
                            <el-input placeholder="请输入短信验证码" v-model="form.verify">
                                <el-button slot="append" type="primary" style="color: #fff;background-color: #409EFF;border-color: #409EFF;margin: 0px;" @click="getcode">获取手机验证码</el-button>
                            </el-input>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-form-item prop="dc_name" label="姓名：">
                    <el-input placeholder="请输入姓名" v-model="form.dc_name"></el-input>
                </el-form-item>
                <el-button type="primary" class="ljyy_btn" @click="submitFun('form')">立即预约</el-button>
            </el-form>
        </div>
    </div>
</template>
<script>
    
    import '../../assets/css/main.css'
    import {isvalidPhone,checkEmail} from '../../assets/js/validate.js'

    var validPhone=(rule, value,callback)=>{
        if (!value){
            callback(new Error('请输入手机号码'))
        }else  if (!isvalidPhone(value)){
            callback(new Error('请输入正确的11位手机号码'))
        }else {
            callback()
        }
    }

    export default {
        data(){
            return{
                form: {
                    dc_type: '',
                    dc_content: '',
                    dc_phone: '',
                    dc_name: '',
                    verify: '',
                },
                formrules: {
                    dc_content: [
                        { required: true, message: '请简述您的具体需求', trigger: 'blur' }
                    ],
                    dc_phone: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                        { required: true, trigger: 'blur', validator: validPhone },
                    ],
                    dc_name: [
                        { required: true, message: '请输入短信验证码', trigger: 'blur' }
                    ],
                    // verify: [
                    //     { required: true, message: '请输入验证码', trigger: 'blur' }
                    // ],
                },
                typeOpt: [],
                activeind: 0,  //默认需求类型
            }
        },
        methods: {
            init(){
                var _this = this;
                this.$httpGet('/api/index/Skilltype/getSkillForStatus',{
                    'st_type': 7,
                }).then(response => {
                    
                    if(response.code == 200){
                        
                        _this.typeOpt = response.msg;

                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                })
            },
            //需求类型change
            typechange(ind,id){
                this.activeind = ind;
                this.form.dc_type = id;
            },
            //立即预约
            submitFun(formName){

                var _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.$httpPost('/api/index/Demandcarding/addDemand',_this.form).then(response => {
                            
                            if(response.code == 200){
                                
                                this.$message({
                                    message: response.msg,
                                    type: 'success'
                                });

                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            //获取手机验证码
            getcode(){
                console.log('获取手机验证码');
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
<style scoped>
    .award-form{
        background: #f4f7f9;
        padding-bottom: 30px;
    }
    .award-ruleForm {
        margin: 0 auto;
        width: 760px;
    }
    .type_btn{
        width: 18%;
        height: 30px;
    }
    .type_btn i{
        font-size: 12px!important;
        font-style: normal;
        display: block;
    }
    .el-button:first-child{
        margin-left: 10px;
    }
    .ljyy_btn{
        width: 200px;
        margin: 35px auto 40px;
        display: block;
        border-radius: 100px;
    }
    .type_btn.changes{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }
</style>
<style>
    .award-form form label{
        width: 100%;
        text-align: left;
        font-size: 15px!important;
        line-height: 20px!important;
        font-weight: 700!important;
        padding: 8px 0;
    }
    .award-form .el-input-group__append{
        padding: 0px;
    }
</style>